<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="ThemeBucket">
  <link rel="shortcut icon" href="#" type="../image/png">
  <title>欢迎模版页</title>
  <!--data table-->
  <link rel="stylesheet" href="../js/data-tables/DT_bootstrap.css" />
</head>
<body class="sticky-header" onload="indexmenu('${oneMenu}','${twoMenu}');">
<%@ include file="../index/index.jsp"%>
<section>
    <div class="main-content" >
    	<!-- 	地址栏 -->
		<div class="page-heading">
            <h3>
                	后台管理系统
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">订单管理</a>
                </li>
                <li class="active">售后订单</li>
            </ul>
        </div>    
        <!--内容开始的地方-->
<section class="panel">
						<header class="panel-heading custom-tab turquoise-tab">
                            <ul class="nav nav-tabs">
                                <li class="active">
                                    <a href="#noPayOrders" data-toggle="tab"  onclick="clickOrders(0)">新问题商品</a>
                                </li>
                                <li class="">
                                    <a href="#noPayOrders" data-toggle="tab"  onclick="clickOrders(1)">已处理商品</a>
                                </li>                                                                                                                                                                                         
                            </ul>
                        </header>
                        <div class="panel-body">
                            <div class="tab-content">
                                <div id="noPayOrders" class="tab-pane active">
								<!-- 顾客订单 -->
					       			<table class="display table table-bordered table-striped dataTable table-hover" id="dynamic-table" aria-describedby="dynamic-table_info">								   	    		
					        			<thead>
								        	<tr role="row">
								        		<th class="sorting" role="columnheader" tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1" style="width: 50px;" aria-label="Rendering engine: activate to sort column ascending">商品号</th>
								        		<th class="sorting" role="columnheader" tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1" style="width: 50px;" aria-label="Rendering engine: activate to sort column ascending">商品图片</th>	
								        		<th class="sorting" role="columnheader" tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1" style="width: 50px;" aria-label="Rendering engine: activate to sort column ascending">商品描述</th>							        	
								        		<th class="sorting" role="columnheader" tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1" style="width: 80px;" aria-label="Rendering engine: activate to sort column ascending">下单人</th>
								        		<th class="sorting" role="columnheader" tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1" style="width: 80px;" aria-label="Rendering engine: activate to sort column ascending">联系方式(下单人)</th>
								        		<th class="sorting" role="columnheader" tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1" style="width: 80px;" aria-label="Rendering engine: activate to sort column ascending">订单号</th>
								        		<th class="sorting" role="columnheader" tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1" style="width: 80px;" aria-label="Rendering engine: activate to sort column ascending">问题</th>
								        		<th class="sorting" role="columnheader" tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1" style="width: 80px;" aria-label="Rendering engine: activate to sort column ascending">申请售后的图片</th>
								        		<th class="sorting_desc" role="columnheader" tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1" style="width: 80px;" aria-sort="descending" aria-label="Browser: activate to sort column ascending">下单时间</th>  
								        		<th class="sorting" role="columnheader" tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1" style="width: 80px;" aria-label="Rendering engine: activate to sort column ascending">申请时间</th>
								        	
								        		<th  style="width: 106px;">操作</th>
								        	</tr>
								        </thead>
								        <tbody>
								        	<c:forEach items="${goods}" var="good">
								        		<tr class="gradeA even">
								        			<td>${good.goodsId}</td>
								        			<td><img src="http://oeilufnx2.bkt.clouddn.com/${good.sampleImg}?imageView2/1/w/100/h/100"></td>
								        			<td>${good.sampleDescribe}</td>
								        			<td>${good.nickName}</td>
								        			<td>${good.phone}</td>
								        			<td>${good.orderId}</td>
								        			<td>${good.problem}</td>
								        			<td data-toggle="modal" data-target="#myModal"><img src="http://oeilufnx2.bkt.clouddn.com/${good.imgs[0]}?imageView2/1/w/100/h/100"  onclick="showImgs('${good.imgs}')"></td>
								        			<td>${good.finishTime}</td>
								        			<td>${good.disposeTime}</td>
								        			
								        			<td><button class="btn btn-info" type="button"  data-toggle="modal" data-target="#myModal2" onclick="goToGoodsOfHasProblemAgree(${good.goodsId})">处理</button></td>
								        		</tr>
								        	</c:forEach>
								        </tbody>
									</table>
							<!-- 分页开始 -->
						  	<div class="row-fluid">
							  	<div class="span6">
								  	<div class="dataTables_paginate paging_bootstrap pagination">
									  	<ul>									  		
								  			<c:choose>
									  			<c:when test="${page.currentPage==1}">
									  				<li class="prev">
									  					<a class="page-link">← 上一页</a>
									  				</li>
									  			</c:when>
									  			<c:otherwise>
									  				<li class="prev">
									  					<a href="../orders/getGoodsOfAfterSale.do?currentPage=${page.currentPage-1}&&status=0" class="page-link">← 上一页</a>
									  				</li>
									  			</c:otherwise>	 							  			
								  			</c:choose>
						                  <c:forEach begin="1" end="${page.totalPage}" var="p">
						                    	<c:choose>
						                    		<c:when test="${page.currentPage==p}">
						                    			<c:if test="${p==1}">
						                    				<li  class="active page-item"><a class="page-link" href="../orders/getGoodsOfAfterSale.do?currentPage=${p}&&status=0" class="page-link">${p}</a></li> 
						                    				<c:if test="${page.totalPage>1}">
						                    					<li  class="page-item"><a class="page-link" href="../orders/getGoodsOfAfterSale.do?currentPage=${p+1}&&status=0">${p+1}</a></li>
						                    				</c:if>
						                    				<c:if test="${page.totalPage>2}">
						                    					<li  class="page-item"><a class="page-link" href="../orders/getGoodsOfAfterSale.do?currentPage=${p+2}&&status=0">${p+2}</a></li>
						                    				</c:if>
						                    				<c:if test="${page.totalPage>3}">
							                    				<li class="page-item"><a class="page-link" href="#">...</a></li>
							                    			</c:if>
						                    			</c:if>
						                    			<c:if test="${p>1}">                   			                   			
							                    			<c:if test="${p<page.totalPage}">
							                    				<c:if test="${p>2}">
							                    					<li class="page-item"><a class="page-link" href="#">...</a></li>
							                    				</c:if>
							                    				<li class="page-item"><a class="page-link" href="../orders/getGoodsOfAfterSale.do?currentPage=${p-1}&&status=0">${p-1}</a></li>
							                    				<li class="active page-item"><a class="page-link" href="../orders/getGoodsOfAfterSale.do?currentPage=${p}&&status=0" class="current_page">${p}</a></li>
							                    				<c:if test="${page.totalPage>2}">
							                    					<li class="page-item"><a class="page-link" href="../orders/getGoodsOfAfterSale.do?currentPage=${p+1}&&status=0">${p+1}</a></li>
							                    				</c:if>
							                    				<c:if test="${page.totalPage-p>1}">
							                    					<li class="page-item"><a class="page-link" href="#">...</a></li>
							                    				</c:if>
							                    			</c:if>
							                    			<c:if test="${p==page.totalPage}">
							                    				<c:if test="${p>3}">
							                    					<li class="page-item"><a class="page-link" href="#">...</a></li>
							                    				</c:if>
							                    				<c:if test="${p>2}">
							                    					<li class="page-item"><a class="page-link" href="../orders/getGoodsOfAfterSale.do?currentPage=${p-2}&&status=0">${p-2}</a></li>
							                    				</c:if>
							                    				<li class="page-item"><a class="page-link" href="../orders/getGoodsOfAfterSale.do?currentPage=${p-1}&&status=0">${p-1}</a></li>
							                    				<li class="active page-item"><a class="page-link" href="../orders/getGoodsOfAfterSale.do?currentPage=${p}&&status=0" class="current_page">${p}</a></li>
							                    			</c:if>
						                    			</c:if>
						                    		</c:when>
						                    	</c:choose>
						                    </c:forEach>					

								  			<c:choose>
									  			<c:when test="${page.currentPage==page.totalPage}">
									  					<li class="pre"><a class="page-link">下一页 → </a></li>
									  			</c:when>
									  			<c:otherwise>
									  					<li class="pre"><a href="../orders/getGoodsOfAfterSale.do?currentPage=${page.currentPage+1}&&status=0" class="page-link">← 下一页</a>
									  					</li>
									  			</c:otherwise>	 							  			
								  			</c:choose>
											<li class="page-item"> <a class="page-link">总共${page.totalPage}页</a></li>
									  	</ul>
								  	</div>
								</div>
							</div>        
							<!-- 分页结束 -->
                                </div>
             
                          </div>
                      </div>
</section>        
       <!-- 查看详情的模态框 -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content" style="width: 841px;">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		        <h4 class="modal-title" id="myModalLabel">问题商品图片</h4>
		      </div>
		      <div class="modal-body" id="goodPricture">
		       <!--这是模态框内容  -->              
		       <!-- 这是模态框内容结束 -->
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		      </div>
		    </div>
		  </div>
		</div>       
		<!-- 模态框结束 --> 		             
       <!-- 同意之后,进行处理 -->
		<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content" style="width: 841px;">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		        <h4 class="modal-title" id="myModalLabel">同意售后之后的处理方式</h4>
		      </div>
		      <div class="modal-body" id="handleProblemGoods22">
		       <!--这是模态框内容  -->
					<div class="form-group">
					    <label class="col-sm-2 control-label">选择处理方式:</label>
				    </div>  					
					<div id="anzhuangfangjianDiv" style="position: relative; margin-left: 259px;">
						<div class="radio">
						  <label>
						    <input type="radio" name="chuliInput" id="openStatus"  value="4">
						    	驳回
						  </label>
						</div>
						<div class="radio">
						  <label>
						    <input type="radio" name="chuliInput" id="openStatus"  value="0">
						    	退货
						  </label>
						</div>						
						<div class="radio">
						  <label>
						    <input type="radio" name="chuliInput" id="openStatus"  value="1">
						    	换货
						  </label>
						</div>						
						<div class="radio">
						  <label>
						    <input type="radio" name="chuliInput" id="openStatus"  value="2">
						    	维修
						  </label>
						</div>						
					</div>	
					<div name="bohuiNeiRong">
						
					
					
					</div>				
					
		       <!-- 这是模态框内容结束 -->
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="chuLiGoodAfterSale()">处理</button>
		      </div>
		    </div>
		  </div>
		</div>       
		<!-- 模态框结束 --> 		        
       <!-- 拒绝以后填写拒绝的理由-->
		<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content" style="width: 841px;">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		        <h4 class="modal-title" id="myModalLabel">拒绝之后的理由</h4>
		      </div>
		      <div class="modal-body" id="handleProblemGoods">
		       <!--这是模态框内容  -->
    
		       <!-- 这是模态框内容结束 -->
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		      </div>
		    </div> 
		  </div>
		</div>       
		<!-- 模态框结束 --> 	        
		<!--内容结束了 -->
	</div>
</section>
</body>
<script src="../js/orders/customerServiceOrders.js"></script>
<script type="text/javascript">
	//点击保存
	function chuLiGoodAfterSale (){
	
	}
	//如果选择驳回, 需要增加驳回的理由
	$("input[name='chuliInput']").click(function(){
	 	if($("input[name='chuliInput']:checked").val()==4){
			$("#handleProblemGoods22>div[name='bohuiNeiRong']").empty();
			$("#handleProblemGoods22>div[name='bohuiNeiRong']").append('<div class="form-group"><label class="col-sm-2 control-label">驳回理由:</label></div>');
			$("#handleProblemGoods22>div[name='bohuiNeiRong']").append('<textarea  rows="3" cols="20"></textarea>');
		}else{
			$("#handleProblemGoods22>div[name='bohuiNeiRong']").empty();
		}	
		
	});
	

</script>
</html>
